<template>
	<view class="page">

		<view class="main">
			<view class="main_box" v-for="(item,index) in Table_list" :key="index">
				<span class="sp_1"> {{item.CorrelationUserName}}</span>
				<span v-if="item.type=='性伴'" style="background-color: #ff6699;" class="sp_2">{{item.type}}</span>
				<span class="sp_3">手机号:{{item.CorrelationUserPhone}}</span>
				<span class="sp_4" @click="detail(item.CorrelationUserId)">报告详情></span>
			</view>

		</view>
		<button class="bt_2" @click="Add">添加性伴</button>
		<uni-popup ref="prop" type="center" style="border-radius: 26rpx;">
			<view class="prop">

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		FindUserrelationship
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				Table_list: []

			}
		},
		onLoad() {
			this.GetData()
		},
		methods: {
			GetData() {
				this.Table_list = []
				FindUserrelationship({
					type: '性伴',
					userId: this.$store.state.vx_uid
				}).then(res => {
					console.log(res);
					console.log('当前数据', this.Table_list);
				}).catch(err => {
					console.log(err);
					this.Table_list = err
				})
			},
			//详情
			detail(id) {
				this.$refs.prop.open('center')
			},
			//添加性伴
			Add() {
				uni.navigateTo({
					url: '/page_jiankangdangan/XBGL_02/XBGL_02'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;
		background-color: #EAEAEA;

		.prop {
			width: 615rpx;
			height: 70vh;
			margin: 0 auto;
			border-radius: 26rpx;
			background-color: #ffffff;
			position: relative;
		}

		.bt_2 {
			width: 622rpx;
			height: 98rpx;
			background: #1677FF;
			margin: 50rpx 0 0 60rpx;
			font-size: 36rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}

		.main {
			width: 100%;
			height: 80vh;
			// background-color: #1677FF;
			overflow: auto;


			.main_box {
				width: 686rpx;
				height: 250rpx;
				background-color: #fff;
				margin-left: 32rpx;
				margin-top: 48rpx;
				position: relative;

				.sp_1 {
					position: absolute;
					width: 140rpx;
					height: 48rpx;
					font-size: 35rpx;
					font-weight: bold;
					display: inline-block;
					top: 40rpx;
					left: 32rpx;
				}

				.sp_2 {
					position: absolute;
					width: 78rpx;
					height: 32rpx;
					// background-color: #1677FF;
					color: #fff;
					font-size: 24rpx;
					line-height: 32rpx;
					top: 48rpx;
					left: 155rpx;
					text-align: center;
					border-radius: 20rpx;
				}

				.sp_3 {
					position: absolute;
					width: 298rpx;
					height: 48rpx;
					font-size: 32rpx;
					display: inline-block;
					left: 32rpx;
					bottom: 42rpx;
				}

				.sp_4 {
					position: absolute;
					right: 0rpx;
					bottom: 42rpx;
					width: 180rpx;
					height: 48rpx;
					color: #999999;
					display: inline-block;
					font-size: 28rpx;
					line-height: 48rpx;
				}
			}
		}

	}
</style>